<template>
  <div>
    <el-card>
      <h2>农产品数据</h2>
      <div class="card-header">
        <div class="right" style="margin-top: 20px">
          <el-select style="width: 200px" class="m-r-20" v-model="queryVo.prodCat"
                     clearable
                     filterable placeholder="请选择一级品类">
            <el-option v-for="item in prodCatList" :label="item" :value="item"></el-option>
          </el-select>
          <el-input style="width: 200px" class="m-r-20" v-model="queryVo.prodName" placeholder="请输入品名"></el-input>

          <el-button type="primary" @click="getTableData" icon="el-icon-search">搜索</el-button>
          <el-button
              type="danger"
              icon="el-icon-download"
              @click="exportToExcel"
          >导出
          </el-button>

        </div>
      </div>
      <el-table :data="dataList"
                border
                id="out-table"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                v-loading="loading"
                height="600" style="width: 100%">
        <el-table-column prop="prodCat" label="一级分类">
        </el-table-column>
        <el-table-column prop="prodPcat" label="二级分类">
        </el-table-column>
        <el-table-column prop="prodName" label="品名">
        </el-table-column>
        <el-table-column prop="lowPrice" label="最低价">
        </el-table-column>
        <el-table-column prop="avgPrice" label="平均价">
        </el-table-column>
        <el-table-column prop="highPrice" label="最高价">
        </el-table-column>
        <el-table-column prop="specInfo" label="规格">
        </el-table-column>
        <el-table-column prop="place" label="产地">
        </el-table-column>
        <el-table-column prop="unitInfo" label="单位">
        </el-table-column>
        <el-table-column prop="pubDate" label="发布日期">
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="this.queryVo.pageNum" :page-sizes="[20, 30, 50, 100, 300]" background
                       :page-size="this.queryVo.pageSize" layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import flaskApi from "@/api/api";

export default {
  name: "Table",
  data() {
    return {
      queryVo: {
        pageNum: 1,
        pageSize: 20,
        prodCat: "",
        prodName: ""
      },

      prodCatList: [],
      total: 0,
      loading: false,
      dataList: []

    }
  },
  created() {
    this.getProdCatList()
    this.getTableData()
  },
  methods: {
    getProdCatList() {
      flaskApi.getProdCatList().then(resp => {
        this.prodCatList = resp.data;
      });
    },
    getTableData() {
      this.loading = true
      setTimeout(() => {
        flaskApi.tableData(this.queryVo).then(resp => {
          if (resp.code === 200) {
            this.dataList = resp.data.records
            this.total = resp.data.total
            this.loading = false
            this.$message.success(resp.message)
          } else {
            this.$message.error(resp.message)
          }
        })
      }, 1000)
    },
    deleteTableData(row) {
      const userInfo = JSON.parse(localStorage.getItem("userInfo"))
      if (userInfo.role === "admin") {
        flaskApi.removeData({"id": row.id}).then(resp => {
          if (resp.code === 200) {
            this.$message.success(resp.message)
            this.getTableData()
          } else {
            this.$message.error(resp.message)
          }
        })
      } else {
        this.$message.error("仅管理员可删除")
      }

    },
    exportToExcel() {

      let excelName = '农产品数据.xlsx';

      var xlsxParam = {raw: true};

      let tables = document.getElementById("out-table").cloneNode(true);

      if (tables.querySelector('.el-table__fixed') !== null) {
        tables.removeChild(tables.querySelector('.el-table__fixed'))
      }

      let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
      var table_write = this.$XLSX.write(table_book, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });

      try {
        this.$FileSaver.saveAs(
            new Blob([table_write], {type: "application/octet-stream"}),
            excelName
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, table_write);
      }
      return table_write;
    },

    handleSizeChange(val) {
      this.queryVo.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.queryVo.pageNum = val
      this.getTableData()
    },
  }
}
</script>

<style lang="less" scoped>
.activity-list {
  display: flex;
  flex-wrap: wrap;
}

.activity-item {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
  width: calc(60% - 20px);
  /* 两列布局 */
  box-shadow: 0 0 10px 0 #ccc;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.activity-header h3 {
  font-size: 16px;
  margin: 0;
}

.activity-header p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.activity-body {
  margin-left: 30px;
}

.activity-body p {
  font-size: 16px;
  color: #666;
  margin: 5px 0;
}

.data-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px 0;
}

.data-item {
  width: calc(50% - 10px);
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
}

.data-item:hover {
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
}

.data-label {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
  color: #333;
}

.data-value {
  font-size: 30px;
  font-weight: bold;
  color: #0080ff;
}
</style>
